<template>
  <div class="brandDetail" v-if="hasContent==1">
    <v-header>
      <div class="nav-tab2">
        <h3>{{brandDetail.brandname}}</h3>
      </div>
    </v-header>
    <div class="detailContent">
      <p class="contentTitle">{{brandDetail.title}}</p>
      <div class="content" v-html="brandDetail.content">
      </div>
    </div>
    <div class="recommendList"  v-if='hasData'>
      <section class="reTitle">
        <span>推荐品牌</span>
        <p class="clearfix">
          <router-link to="/brand">MORE &nbsp; &gt;</router-link>
        </p>
      </section>
      <swiper :options="swiperOption" ref="mySwiperA" class="swiper-container swiper1">
        <swiper-slide v-for="(item,index) in recommendItem" :key='index'>
          <!--<div @click.stop='getBrandInfo(item.id)'>-->
          <router-link :to="'/brandInfo/'+ item.id">
            <div>
              <img :src="item.coverurl|https" alt="">
            </div>
            <div class="titelBg">
              <p>{{item.name}}</p>
            </div>
          </router-link>
          <!--</div>-->
        </swiper-slide>
      </swiper>
    </div>

  </div>
      <v-error v-else></v-error>
</template>
<script>
  import * as api from '../../../common/api/article'
  import { APP } from '../../../common/util'
  export default {
    data() {
      return {
        brandDetail: {},
        recommendItem: [],
        hasData: false,
        swiperOption: {
          loop: true,
          slidesPerView: 'auto',
          spaceBetween: 10,
          paginationClickable: true,
          freeMode: true,
          freeModeSticky: true,
          freeModeMomentumBounce: false,
          resistance: false
        },
        hasContent: 1
      }
    },
    mounted() {
      var that = this
      api.LibraryInfo({ id: this.$route.params.id }).then(function (res) {
        if (res) {
          console.log('品牌库详情', res)
          that.hasContent = 1
          that.brandDetail = res.info
          that.initShare({ type: 0, info: { title: '斗牛-' + res.info.brandname, img: res.info.coverurl, desc: res.info.title }})
          if (res.recommend && res.recommend.length > 0) {
            that.recommendItem = res.recommend
            that.hasData = true
          }
        } else {
          that.hasContent = 2
          that.toast('加载失败')
        }
      }).catch(function (err) {
        that.hasContent = 2
        console.error(err)
        that.toast('加载失败')
      })
    },
    computed: {
    }
  }

</script>
<style scoped>
#app .swiper-container{
  width: 100%;
}
  .brandDetail {
    padding-top: 10px;
  }

  .detailContent {
    margin: 10px;
  }

  .contentTitle {
    color: #333;
    margin: 0 10px 10px 10px;
    word-wrap: break-word;
    word-break: normal;
    font-size: 1.25rem;
    font-weight: 600;
  }

  .reTitle {
    color: #999;
    font-size: 0.875rem;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid #eee;
  }

  .reTitle p a {
    color: #999
  }

  .reTitle p {
    float: right;
  }

  .swiper1 {
    padding: 10px;
  }

  .swiper1 .swiper-slide {
    width: 100px;
  }

  .swiper1 .swiper-slide div:nth-of-type(1) {
    height: 100px;
    overflow: hidden;
  }

  .swiper1 .swiper-slide div img {
    width: 100%;
  }
</style>
